<template>

	<kb-layout>

		<!-- 5个按钮链接快捷 -->
		<view class="bg-white " v-if="zhutype<4">
			<kb-submenu></kb-submenu>
		</view>
		<!-- 吸顶搜索bar -->
		<u-sticky :offsetTop="offsetTop">
			<kb-drop-search :areas="ee.areas" height="300" :zhutype="zhutype" :rent_type="rent_type" v-model="params"
				@change="onSearchChange"></kb-drop-search>

			<up-alert v-if="shotips" :center="true" type="warning" description="没有找到相关房源,换个搜索条件试试"></up-alert>

		</u-sticky>
		<!--  -->

		<view class="u-page">

			<view v-if="sechouse.length>0">
				<view class="house-items-ul">
					<view class="ul-li" v-for="(item, index) in sechouse" :key="index">

						<kb-sechouse-item :zhutype="zhutype" :house="item"></kb-sechouse-item>

					</view>
				</view>
			</view>

			<up-empty v-if="isempty" mode="data" text="暂无房源" :icon="ee.webUrl+'/images/empty/nodata.png'"> </up-empty>


			<view v-if="(!isempty && nomore)" class="findmore"> 已经到底线了</view>


		</view>
		<kb-footer :color="ee.primayColor"></kb-footer>


	</kb-layout>
</template>

<script>
	import util from "@/common/tools/utils.js";
	import {
		sys
	} from "../../uni_modules/uview-plus";
	export default {
		data() {
			return {
				zhutype: 0,
				rent_type: 0,
				sechouse: [],
				page: 1,
				total: 0,
				pagesize: 10,
				nomore: false,
				params: {}, //搜索的赋值和初始化可以给搜索组件内传递数据
				onfetch: false, //记录正在取房源标志 
				shotips: false, //显示无房源提示
				issearch: false,
				offsetTop: sys().statusBarHeight,
			}
		},
		computed: {
			isempty() {
				return this.total == 0;
			},
		},
		methods: {
			onSearchChange(form) {
				console.log('house-search-change', form);
				//把搜索bar选择的值组合成搜索参数
				var params = {};

				if (form.areas?.isok) {
					//按区域的title搜索
					params.area = form.areas.area.title;
					//按小区的id搜索
					if (form.areas.street?.id) {
						//params.village_id = form.areas.street.id;
						params.quan = form.areas.street.title;
					}

				}
				if (form.prices?.isok) {

					if (form.prices.minprice && form.prices.maxprice) {
						params.minprice = form.prices.minprice;
						params.maxprice = form.prices.maxprice;
					}

					if (form.prices.price) {
						var p = form.prices.price.split('-');
						params.minprice = p[0];
						params.maxprice = p[1];
					}
				}
				if (form.rooms?.isok) {
					params.room = [];
					for (var r in form.rooms.room) {
						if (form.rooms.room[r])
							params.room.push(r)
					}
				}
				if (form.extend?.isok) {
					for (var item in form.extend) {
						params[item] = [];
						for (var r in form.extend[item]) {
							if (form.extend[item][r]) {
								params[item].push(r)
							}
						}
					}
				}
				if (form.keyword) {
					params.keyword = form.keyword;
				}
				this.params = params;
				this.issearch = true;
				this.sechouse = [];
				//初始化搜索
				this.page = 1;
				this.nomore = false;
				this.fetchHouse(true)
			},
			fetchHouse(issearch = false) {

				uni.showLoading({
					title: 'Loading...'
				});

				util.getSechouseList({
					zhutype: this.zhutype,
					rent_type: this.rent_type,
					page: this.page,
					pagesize: this.pagesize,
					...this.params,
				}).then(
					(ret) => {

						if (ret.items.length > 0) {
							this.shotips = false;
							this.page = this.page + 1;
							this.total = ret.total;
							this.sechouse = this.sechouse.concat(ret.items);
						} else {
							if (issearch) {
								this.shotips = true;
							}
						}
						uni.hideLoading();

					}
				)
			}
		},
		onLoad(option) {
			this.zhutype = option?.zhutype || 0;
			if (option.keyword) {
				this.params.keyword = option.keyword
			}
			this.fetchHouse();
			console.log(this.zhutype)
		},
		onPullDownRefresh() {
			this.page = 1;
			this.sechouse = [];
			this.nomore = false;
			this.fetchHouse()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)

		},
		onPageScroll(e) {

		},
		onReachBottom() {
			if (this.total && this.total < this.page * this.pagesize)
				this.nomore = true;
			else
				this.total > 1 && this.fetchHouse();

			this.shotips = false;
			return true;

		},
	}
</script>

<style lang="scss">
	.bg-white {
		background: #fff !important;
		padding: 30rpx;
		padding-top: 60rpx;
	}

	.u-page {
		background: #fff !important;
		padding: 30rpx;
		min-height: 70vh;
		padding-top: 30rpx;
	}

	.house-items-ul .ul-li {
		border-bottom: 1px solid #dadada;
	}

	.house-items-ul .ul-li:last-child {
		border-bottom: 0;
	}
</style>